<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="static/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="static/bootstrap-3.3.7/js/jquery-3.3.1.min.js"></script>
    <script src="static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>

<style>

</style>

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <h4 class="navbar-text" style=" color: #dddddd;">
                    ca管理系统
                </h4>
            </div>
            <p class="navbar-text navbar-right" style="margin-right: 1%"><span style="color: #dddddd;">欢迎，{{.}}！</span> <a href="javascript:void(0)" onclick="logout()" class="navbar-link">退出</a></p>
        </div>
    </nav>

    <div style="width: 70%;margin: 0 auto">
        <table class="table table-bordered table-hover">
            <caption>ip列表</caption>
            <thead>
                <tr>
                    <th class="col-sm-1"><input type="checkbox" id="selectAll">全选</th>
                    <th>名称</th>
                    <th>ip</th>
                </tr>
            </thead>
            <tbody id="iplist">
                <!-- <tr>
                    <td><input type="checkbox"></td>
                    <td>银行节点1</td>
                    <td>10.1.1.1</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>银行节点2</td>
                    <td>10.2.2.2</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>银行节点3</td>
                    <td>10.3.3.3</td>
                </tr> -->
            </tbody>
        </table>
        <button type="button" class="btn btn-default pull-right" id="reqcertbtn" style="background: #333333; color: #dddddd;">申请证书</button>
        <button type="button" class="btn btn-default pull-right" data-toggle="modal" data-target="#addip" style="background: #333333; color: #dddddd;">添加ip</button>
        <button type="button" class="btn btn-default pull-right" style="background: #333333; color: #dddddd;" id="removeIp">移除ip</button>
        <!-- <button type="button" class="btn btn-default pull-right" style="background: #333333; color: #dddddd;">查看信息</button> -->
    </div>
    <!--添加ip 模态框（Modal） -->
    <div class="modal fade" id="addip" tabindex="-1" role="dialog" aria-labelledby="addipModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="addipModalLabel">
                        请填写ip相关信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" action="login">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="ipname" name="ipname" placeholder="名称">
                                <div id="errorcode_ipname">
                                    <span class="help-block">名称不能为空</span>
                                    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="ipstr" name="ipstr" placeholder="ip">
                                <div id="errorcode_ipstr">
                                    <span class="help-block" id="errortext_ipstr">ip不能为空</span>
                                    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" id="addipbtn" class="btn btn-primary" style="background: #333333; color: #dddddd;">
                        提交
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!--申请证书 模态框（Modal） -->
    <div class="modal fade" id="reqcert" tabindex="-1" role="dialog" aria-labelledby="reqcertModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                        </button>
                    <h4 class="modal-title" id="reqcertModalLabel">
                        请填写证书相关信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form id="certForm" class="form-horizontal" enctype="multipart/form-data" role="form">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">证书有效期*</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="notAfter" name="notAfter" placeholder="请输入证书有效期">
                            </div>
                            <label for="lastname" class="col-sm-1 control-label">天</label>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-3 control-label">申请证书的ip*</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="ipAddress" name="ipAddress" readonly="readonly">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="pubKeyFile" class="col-sm-3 control-label">上传证书请求*</label>
                            <div class="col-sm-3">
                                <input type="file" id="pubKeyFile" name="pubKeyFile">
                            </div>
                            <label for="inputfile" class="col-sm-4 control-label">没有文件?<a href="/static/tool.rar" download="tool.rar">下载工具</a></label>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-3 control-label">国家</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="country" name="country" placeholder="例如：china">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-3 control-label">公司名</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="organization" name="organization" placeholder="例如：tjfoc">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-3 control-label">域名</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="commonName" name="commonName" placeholder="例如：test.example">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                    <button type="button" id="easygenbtn" class="btn btn-default" data-dismiss="modal">
                                一键生成
                            </button>
                    <button type="button" id="commitreqcertbtn" class="btn btn-primary" style="background: #333333; color: #dddddd;">
                            提交
                        </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

</body>
<script>
    function logout() {
        $.ajax({
            type: "POST",
            url: "/logout",
            success: function(data) {
                window.location.href = "login"
            }
        })
    }
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "/iplist",
            success: function(data) {
                var con = ""
                data = JSON.parse(data)
                    //alert(data)
                $.each(data, function(index, item) {
                    con += "<tr><td><input type='checkbox' name='iplistcheckbox' id='" + item.Id + "'></td>"
                    con += " <td>" + item.ipName + "</td>"
                    con += " <td>" + item.ipStr + "</td></tr>"
                        //alert(item.ipStr + index)
                });
                $("#iplist").append(con)
            }
        });
    });
    $("#errorcode_ipname").hide()
    $("#errorcode_ipstr").hide()
    $("#selectAll").click(function() {
        var allcheck = $(this).prop("checked")
        var check = $("input[name='iplistcheckbox']").prop("checked", allcheck)
    })
    $("tbody").on('click', "[name='iplistcheckbox']", function() {
        var checkAll = $("#selectAll").prop("checked")
        var check = $("input[name='iplistcheckbox']")
        var checknum = 0
            //  alert(check.length)
        for (var index = 0; index < check.length; index++) {
            //alert($(check[index]).prop("checked"))
            if (checkAll != $(check[index]).prop("checked")) {
                $("#selectAll").prop("checked", false)
            }
            if ($(check[index]).prop("checked") == true) {
                checknum++
            }
        }
        if (checknum == check.length) {
            $("#selectAll").prop("checked", true)
        }
    });
    $("#removeIp").click(function() {
        var check = $("input[name='iplistcheckbox']:checked")
        if (check.length == 0) {
            alert("请选中至少一条记录")
        } else {
            for (var index = 0; index < check.length; index++) {
                //alert($(check[index]).attr("id"))
                var id = $(check[index]).attr("id")
                $.ajax({
                    type: "POST",
                    url: "/removeip",
                    data: {
                        id: id,
                    },
                    success: function(data) {}
                });
            }
            alert("移除成功")
            window.location.reload()
        }

    })
    $("#addipbtn").click(function() {
        var ipname = $("#ipname").val()
        var ipstr = $("#ipstr").val()
        if (ipname == "") {
            $("#errorcode_ipname").show()
            $("#errorcode_ipname").parent().addClass("has-error has-feedback")
        } else {
            $("#errorcode_ipname").hide()
            $("#errorcode_ipname").parent().removeClass("has-error has-feedback")
            if (ipstr == "") {
                $("#errorcode_ipstr").show()
                $("#errortext_ipstr").text("ip地址不能为空")
                $("#errorcode_ipstr").parent().addClass("has-error has-feedback")
            } else {
                if (!isValidIP(ipstr)) {
                    $("#errorcode_ipstr").show()
                    $("#errorcode_ipstr").parent().addClass("has-error has-feedback")
                    $("#errortext_ipstr").text("ip地址格式有错误")
                } else {
                    $("#errorcode_ipstr").hide()
                    $("#errorcode_ipstr").parent().removeClass("has-error has-feedback")
                    $.ajax({
                        type: "POST",
                        url: "/addip",
                        data: {
                            ipname: ipname,
                            ipstr: ipstr
                        },
                        success: function(data) {
                            alert("添加成功")
                            window.location.reload()
                        }
                    });
                }
            }
        }
    })
    $("#reqcertbtn").click(function() {
        var check = $("input[name='iplistcheckbox']:checked")
        if (check.length == 0) {
            alert("请选中至少一条记录")
        } else {
            var tdtext = ""
            for (var index = 0; index < check.length; index++) {
                //alert($(check[index]).attr("id"))
                tdtext += $(check[index]).parent().next().next().text() + ","
            }
            tdtext = tdtext.substring(0, tdtext.length - 1)
            $("#ipAddress").val(tdtext)
            $("#reqcert").modal("show")
        }
    })
    $("#commitreqcertbtn").click(function() {
        var NotAfter = $("#notAfter").val()
        var pubKeyFile = $('#pubKeyFile').val();
        if (NotAfter == "") {
            alert("有效期不能为空")
        } else if (pubKeyFile == "") {
            alert("公钥不能为空")
        } else {
            var fileType = pubKeyFile.substr(pubKeyFile.length - 4, pubKeyFile.length)
            if (fileType == ".pem") {
                $.ajax({
                    url: '/reqcert',
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    data: new FormData($('#certForm')[0]),
                    success: function(data) {
                        alert("生成成功")
                            //alert(data)
                        var link = document.createElement('a')
                        link.setAttribute("download", "")
                        link.href = data
                        link.click()
                        window.location.reload()
                            // window.open("conf/cert.pem")
                    }
                });
            } else {
                alert("上传文件类型错误,需要.pem文件")
            }
        }
    })
    $("#easygenbtn").click(function() {
        var ipAddress = $("#ipAddress").val()
        $.ajax({
            url: '/easygen',
            type: 'POST',
            data: {
                ipAddress: ipAddress
            },
            success: function(data) {
                alert("生成成功")
                var link = document.createElement('a')
                link.setAttribute("download", "")
                link.href = "conf/" + ipAddress + ".zip"
                link.click()
                    // window.open("conf/cert.pem")
            }
        });
    })

    function isValidIP(ip) {
        var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
        return reg.test(ip);
    }
</script>

</html>